/* Container for centering and wrapping buttons */
.button-container {
    display: flex; /* Enable Flexbox */
    flex-wrap: wrap; /* Allow items to wrap to the next line */
    justify-content: space-evenly; /* Evenly distribute space around items */
    align-items: center; /* Vertically center items in the row */
    width: 100%; /* Take full width of its parent */
    max-width: 960px; /* Adjust this value based on how many buttons you want per row before wrapping. A wider value means more buttons per row. */
    margin: 20px auto; /* Center the container horizontally and add top/bottom margin */
    padding: 10px; /* Padding around the group of buttons */
    box-sizing: border-box; /* Include padding in the width calculation */
}

/* Individual Shadow Button Styling */
.shadow-button {
    display: flex; /* Use flexbox for button content to easily center text */
    justify-content: center; /* Center content horizontally within the button */
    align-items: center; /* Center content vertically within the button */
    padding: 15px 25px; /* Generous padding for a better button feel */
    margin: 15px; /* Margin between buttons for good separation */
    background-color: #f0f0f0; /* Light gray background */
    border: 1px solid #dcdcdc; /* Subtle border */
    border-radius: 8px; /* Slightly more rounded corners */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); /* Soft, subtle shadow */
    transition: all 0.3s ease-in-out; /* Smooth transitions for all properties */
    position: relative; /* Needed for tooltip positioning */
    cursor: pointer; /* Indicate it's clickable */
    min-width: 250px; /* Ensure a consistent minimum width for all buttons */
    text-align: center; /* Fallback for older browsers / general text centering */
    box-sizing: border-box; /* Ensure padding/border included in min-width */
}

/* Hover effects for the shadow button */
.shadow-button:hover {
    background-color: #e8e8e8; /* Slightly darker background on hover */
    box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.2); /* More prominent shadow on hover */
    transform: translateY(-5px); /* Lift effect on hover */
}

/* Styling for the link inside the button */
.shadow-button a {
    text-decoration: none; /* Remove underline */
    color: #333; /* Dark gray text color */
    font-weight: bold; /* Bold text */
    font-size: 1.1em; /* Slightly larger font size */
    display: block; /* Make the entire button area clickable */
    width: 100%; /* Ensure the link fills the button width */
    height: 100%; /* Ensure the link fills the button height */
    white-space: normal; /* Allow text to wrap if necessary */
    line-height: 1.4; /* Improve readability for multi-line text */
}

/* Tooltip styles */
.shadow-button[data-tooltip]:hover:after {
    content: attr(data-tooltip); /* Get tooltip text from data-tooltip attribute */
    position: absolute;
    bottom: calc(100% + 10px); /* Position above the button, with space */
    left: 50%;
    transform: translateX(-50%); /* Center the tooltip horizontally */
    background-color: rgba(0, 0, 0, 0.85); /* Darker background for better contrast */
    color: #fff; /* White text */
    padding: 8px 12px; /* More padding for the tooltip */
    border-radius: 5px; /* Rounded corners for the tooltip */
    font-size: 0.85em; /* Slightly larger font for readability */
    white-space: nowrap; /* Prevent tooltip text from wrapping */
    z-index: 100; /* Ensure tooltip is on top of everything */
    opacity: 0; /* Start hidden */
    visibility: hidden; /* Start hidden */
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

/* Tooltip arrow (optional, but adds a nice touch) */
.shadow-button[data-tooltip]:hover:before {
    content: '';
    position: absolute;
    bottom: calc(100% + 5px); /* Positions below the tooltip content */
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0.85) transparent transparent transparent; /* Creates a downward-pointing arrow */
    z-index: 101; /* Above the tooltip body */
    opacity: 0; /* Start hidden */
    visibility: hidden; /* Start hidden */
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}


/* Show tooltip and arrow on hover */
.shadow-button[data-tooltip]:hover:after,
.shadow-button[data-tooltip]:hover:before {
    opacity: 1; /* Fade in */
    visibility: visible; /* Make visible */
}

/* Optional: Media query for smaller screens */
@media (max-width: 600px) {
    .shadow-button {
        min-width: unset; /* Remove min-width on small screens */
        width: calc(100% - 30px); /* Make buttons take full width minus margin on small screens */
        margin: 10px 15px; /* Adjust margin */
    }

    .button-container {
        padding: 5px;
    }
}